<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="./build/react.js"></script>
	<script src="./build/react-dom.js"></script>
	<script src="./build/browser.min.js"></script>
</head>
<body>
	<div id="example"></div>
	<!-- 写法1： -->
	<script type="text/babel">
		var NotesList = React.createClass({
			render:function(){
				return (
					<ol>
						{
							React.Children.map(this.props.children,function(item,index){
								return (
									<li>
										{
											item
										}
									</li>
								)
							})
						}
					</ol>
				)
			}
		});

		ReactDOM.render(
			<NotesList key="2">
				<span>hello</span>
				<span>world</span>
			</NotesList>,
			document.querySelector('#example')
		)
	</script>
	<!-- 写法2： -->
	<script type="text/babel">
		var NotesList = React.createClass({
			render:function(){
				return (
					<ol>
						{
							this.props.children.map(function(item,index){
							return (
								<li>
									{
										item
									}
								</li>
							)
						})
						}
					</ol>
				)
			}
		})
		ReactDOM.render(
			<NotesList key='1'>
				<span>hello 02</span>
				<span>world 02</span>
			</NotesList>,
			document.querySelector('#example')
		)
	</script>
</body>
</html>
<!--

this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点（查看 demo05）。


var NotesList = React.createClass({
  render: function() {
    return (
      <ol>
      {
        React.Children.map(this.props.children, function (child) {
          return <li>{child}</li>;
        })
      }
      </ol>
    );
  }
});

ReactDOM.render(
  <NotesList>
    <span>hello</span>
    <span>world</span>
  </NotesList>,
  document.body
);
上面代码的 NoteList 组件有两个 span 子节点，它们都可以通过 this.props.children 读取，运行结果如下。



这里需要注意， this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。

React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。更多的 React.Children 的方法，请参考官方文档。
 -->
